<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .drawer {
            position: fixed;
            top: 0;
            right: -500px;
            width: 500px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
            transition: right 0.3s ease;
            z-index: 1000;
            padding: 20px;
            box-sizing: border-box;
        }
        .drawer.open {
            right: 0;
        }
        .drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 10px;
        }
        .drawer-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
        }
        .drawer-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        .drawer-close:hover {
            color: #333;
        }
        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .drawer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 搜索过滤区域 -->
    <div>
        <div>
            <label for="type">类型：</label>
            <select id="type" v-model="type">
                <option value="UNDERGRAD">本科生</option>
                <option value="GRADUATE">研究生</option>
            </select>
        </div>
        <div>
            <label for="sortField">排序方案：</label>
            <select id="sortField" v-model="sortField">
                <option value="student_id">学号</option>
                <option value="name">姓名</option>
                <option value="age">年龄</option>
                <option value="classNum">班级</option>
            </select>
            <select id="order" v-model="sortOrder">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
        </div>
        <button @click="loadStudents">搜索</button>
    </div>

    <!-- 学生表格 -->
    <table>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>类型</th>
            <th>班级</th>
            <th>地址</th>
            <th>就学信息</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="student in students" :key="student.studentId">
            <td>{{ student.studentId }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.type === 'UNDERGRAD' ? '本科生' : '研究生' }}</td>
            <td>{{ student.classNum }}</td>
            <td>{{ student.province }}{{ student.city }}{{ student.street }}{{student.doorNumber}}</td>
            <td>
                <span v-if="student.type === 'UNDERGRAD'">{{ student.major }}</span>
                <div v-else>
                    <div>导师：{{ student.supervisor }}</div>
                    <div>方向：{{ student.researchFiled }}</div>
                </div>
            </td>
            <td>
                <button @click="loadStudentScores(student.scores)">查看成绩</button>
            </td>
            <td>
                <button @click="editStudent(student.studentId)">编辑</button>
                <button @click="deleteStudent(student.studentId)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 分页控制 -->
    <div>
        <span>第 {{ currentPage }} 页</span>
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
        <select v-model="pageSize">
            <option>5</option>
            <option>10</option>
            <option>20</option>
        </select>
    </div>

    <!-- 抽屉显示学生成绩表格 -->
    <div class="drawer" :class="{ open: isDrawerOpen }">
        <div class="drawer-header">
            <h3 class="drawer-title">成绩信息</h3>
            <button class="drawer-close" @click="closeDrawer">×</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>课程名</th>
                <th>分数</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(score, course) in grades" :key="course">
                <td>{{ course }}</td>
                <td>{{ score }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="drawer-backdrop" :class="{ open: isDrawerOpen }"></div>
</div>

<script type="module">

    const {createApp} = Vue;

    createApp({
        data() {
            return {
                students: [],
                currentPage: 1,
                pageSize: 10,
                totalPages: 1,
                type: 'GRADUATE',
                sortField: 'student_id',
                sortOrder: 'asc',
                drawerVisible: false,
                drawerScores: {},

                isDrawerOpen: false,
                grades: {},
            }
        },
        created() {
            this.loadStudents();
        },
        methods: {
            async loadStudents() {
                try {
                    const params= {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        type: this.type,
                        sort: this.sortField,
                        order: this.sortOrder
                    }

                    const response = await axios.get('http://localhost:8080/api/students', { params });
                    this.students = response.data.data.list;
                    const response2 = await axios.get('http://localhost:8080/api/students/stats');
                    if(params.type === 'GRADUATE'){
                        this.totalPages = Math.ceil(response2.data.data.graduateCount / params.pageSize);
                    } else if(params.type === 'UNDERGRADUATE'){
                        this.totalPages = Math.ceil(response2.data.data.undergradCount / params.pageSize);
                    }
                } catch (error) {
                    console.error('Error loading students:', error);
                }
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.loadStudents();
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.loadStudents();
                }
            },
            editStudent(id) {
                // 后续实现跳转逻辑
                console.log('编辑学生:', id);
            },
            async deleteStudent(id) {
                if (confirm('确定删除该学生吗？')) {
                    await axios.delete(`/api/students/${id}`);
                    this.loadStudents();
                }
            },
            loadStudentScores(scores) {
                this.drawerVisible = true;
                this.drawerScores = scores;
                this.openDrawer();
            },
            async openDrawer(){
                this.isDrawerOpen = true;
                this.grades = this.drawerScores;
            },
            async closeDrawer(){
                this.isDrawerOpen = false;
            },
        }

    }).mount('#app')
</script>
</body>
</html>